<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件原生事件绑定 - .native</title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		
		<div id="root">
			{{msg}}
			<!--带.native直接绑定原生事件-->
			<child content="child content" @click.native='handleClick'></child>
			
			<!--不加.native需要由子组件来触发调用父组件-->
			<child-two content="child content2" @click='handleClick'></child-two>
		</div>
		
		<script>
			
			Vue.component('child-two',{
				props:{
					content:String,
					default:'Child Content2'
				},
				template:'<div @click="handleClick">{{content}}</div>',
				methods:{
					handleClick:function(){
						this.$emit('click','hello parent');
					}
				}
			});
			
			Vue.component('child',{
				props:{
					content:String,
					default:'Child Content'
				},
				template:'<div>{{content}}</div>',
				methods:{
					handleClick:function(){
						alert('childHandle click');
					}
				}
			});
			
			var vm = new Vue({
				el:'#root',
				data:{
					msg:'hello vue'
				},
				methods:{
					handleClick:function(msg){
						if(msg){
							alert(msg);
						}else{
							alert('parentHandle click');
						}
					}
				}
			});
		</script>
	</body>
</html>
